<template>
  <div class="appp">
    <dv-full-screen-container>
      <div class="warrper">
        <div>
          <head-view :title="title" :time="time"/>
        </div>
        <div class="content-root">
          <a-row :gutter="3" class="up">
            <a-col :span="6" style="height:100%">
              <div style="height: 28.5vh;width: 100%;">
                <dv-border-box-10>
                  <num-info-show title="待检工单" cls="data1" :value="inspectNum" ref="numInfoShow1"/>
                </dv-border-box-10>
              </div>
              <div style="height: 28.5vh;width: 100%;margin-top: 1vh;">
                <dv-border-box-10>
                   <num-info-show title="待检数量" cls="data2" :value="needCheckQty" ref="numInfoShow2"/>
                </dv-border-box-10>
              </div>
            </a-col>
            <a-col :span="12" style="height:100%">
              <dv-border-box-10 class="inspect-list-root">
                <inspect-list ref="inspectListRef"/>
                <!-- <div class="mod-title">设备生产情况</div> -->
              </dv-border-box-10>
            </a-col>
            <a-col :span="6" style="height:100%">
              <dv-border-box-10 class="inspect-list-root">
                <check-scrap-list ref="checkScrapListRef"/>
              </dv-border-box-10>

              <!-- <div style="height: 28.5vh;width: 100%;">
                <dv-border-box-10></dv-border-box-10>
              </div>
              <div style="height: 28.5vh;width: 100%;margin-top: 1vh;">
                <dv-border-box-10></dv-border-box-10>
              </div> -->
            </a-col>
          </a-row>
          <a-row :gutter="3" class="up" style="margin-top:0.5vh">
            <a-col :span="6" style="height:100%">
              <dv-border-box-10 class="footer-view ">
                 <num-info-show title="合格数量" cls="data3" :value="sumQualifiedQty" ref="numInfoShow3"/>
              </dv-border-box-10>
            </a-col>

          <a-col :span="12" style="height:100%">

              <dv-border-box-10 class="footer-view ">
                <week-check-chart ref="weekCheckChartRef"/>
              </dv-border-box-10>
            </a-col>
            <a-col :span="6" style="height:100%">
              <dv-border-box-10 class="footer-view ">
                <scarp-type />
              </dv-border-box-10>
            </a-col>
          </a-row>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import HeadView from '../../plugins/Head/index.vue'
import moment from 'moment'
import InspectList from './modules/inspectList.vue'
import NumInfoShow from './modules/NumInfoShow.vue'
import {getCheckOtherApi} from '../../api/product/index.js'
import weekCheckChart from './modules/weekCheckChart.vue'
import checkScrapList from './modules/checkScrapList.vue'
import scarpType from './modules/scarpType.vue'


export default {
  name: 'App',
  components: {
    HeadView,
    InspectList,
    NumInfoShow,
    weekCheckChart,
    checkScrapList,
    scarpType
  },
  data() {
    return {
      title: '检验看板',
      timeInterval: null,
      timeIndex: 0,
      time: moment().format('YYYY-MM-DD HH:mm'),
      inspectNum: '',
      needCheckQty: '',
      sumQualifiedQty: ''
    }
  },
  created() {
    this.setTime()
  },
  mounted() {
    const _that = this
    this.timeInterval = setInterval(() => {
      _that.timeIndex++
      if(_that.timeIndex > 3) {
        _that.getData()
        _that.$childrentimeIndex = 0
      }
      _that.setTime()
    }, 1000 * 60)

    setTimeout(() => {
      _that.getData()
    }, 200);
  },
  methods: {
    getData() {
      const _that = this
      getCheckOtherApi({pkCorp: 1002}).then(res => {
        console.log('getCheckOtherApi',res)
        const {code,data} = res
        if(code === 2000) {
          _that.inspectNum = (data.inspectNum + '' || '').split('.')?.[0] || ''
          _that.needCheckQty = (data.needCheckQty + '' || '').split('.')?.[0] || ''
          _that.sumQualifiedQty = (data.sumQualifiedQty + '' || '').split('.')?.[0] || ''
        }
        // inspectNum, needCheckQty,sumQualifiedQty
        }
      )
      this.$refs.numInfoShow1.getData()
      this.$refs.numInfoShow2.getData()
      this.$refs.numInfoShow3.getData()
      _that.$refs.inspectListRef.getData()
      _that.$refs.weekCheckChartRef.getData()
      _that.$refs.checkScrapListRef.getData()

    },
    setTime() {
      const _that = this
      _that.time = moment().format('YYYY-MM-DD HH:mm')
      const weekDay = moment().day()

      switch(weekDay) {
        case 0:
         _that.time = `${_that.time} 星期日`
          break
        case 1:
         _that.time = `${_that.time} 星期一`
          break
        case 2:
         _that.time =  `${_that.time} 星期二`
          break
        case 3:
         _that.time = `${_that.time} 星期三`
          break
        case 4:
         _that.time = `${_that.time} 星期四`
          break
        case 5:
        _that.time = `${_that.time} 星期五`
          break
        case 6:
        _that.time = `${_that.time} 星期六`
          break
      }
    },
    destroyed() {
      clearInterval(this.timeInterval)
      this.timeInterval = null
    },
  },
}
</script>

<style lang="less" scoped>
.appp {
  font-family: 'MicrosoftYaHei', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #fff;
  // padding: 15px;
  box-sizing: border-box;
  /* margin-top: 60px; */
}
.content-root {
  height: 93vh;
  margin-left: 6px;
  margin-right: 6px;
  margin-top: 1vh;
}
.footer-view {
  height: 33.5vh;
}
.production-info {
  height: 41vh;
}
.warrper ::v-deep .dv-border-box-7 .border-box-content {
  display: flex;
  justify-content: center;
  align-items: center;
}
.inspect-list-root {
  height: 58vh;
  overflow: hidden;
}
.left {
  padding: 0px 15px;
  .px2vh(line-height, 48);
  text-align: left;
  .px2font(13);
  .anticon {
    .px2font(20);
    vertical-align: middle;
  }
}
.mod-title {
  .px2font(24);
  .px2vh(padding-top, 8);
  .px2vw(padding-left, 15);
  .px2vh(padding-bottom, 8);
  letter-spacing: 2px;
  color: #fff;
  text-align: center;
  background: linear-gradient(
    to right,
    rgba(21, 60, 160, 0.05),
    rgba(29, 62, 208, 0.3) 50%,
    rgba(21, 60, 160, 0.05)
  );
}

.warrper ::v-deep .dv-scroll-board .rows .ceil {
  .px2font(14) !important;
  color: #eee;
}

.warrper ::v-deep .dv-scroll-board .header .header-item {
  .px2font(16) !important;
}
.warrper ::v-deep .ant-fullcalendar-header {
  padding: 5px 16px 5px 0;
}

</style>
